<template>
  <transition
    enter-active-class="animate__animated animate__fadeInLeft"
    leave-active-class="animate__animated animate__fadeOutRight"
  >
    <div class="musicplay" v-if="currentMusic">
      <div class="player">
        <img
          class="song_img"
          :style="{ animationPlayState: isplay ? 'running' : 'paused' }"
          :src="currentMusic.picUrl || currentMusic.al.picUrl"
          @click.stop="isfull = true"
        />
        <span :style="{ animationPlayState: isplay ? 'running' : 'paused' }">{{
          currentMusic.name
        }}</span>
        <div class="artist">
          作者:<b
            v-for="(artists, i) in currentMusic.song.artists"
            :key="i + artists"
          >
            {{ artists.name }}</b
          >
        </div>
        <div class="img-icon" @click.stop="changeplay">
          <img v-if="isplay" src="../assets/images/stop_icon.png" alt="" />
          <img v-else src="../assets/images/play_icon.png" alt="" />
          <canvas ref="canvas" width="40px" height="40px"></canvas>
        </div>
      </div>
      <audio
        :src="`https://music.163.com/song/media/outer/url?id=${currentMusic.id}.mp3`"
        autoplay
        loop
        ref="audio"
        @timeupdate="timeupdate"
        @play="isplay = true"
        @pause="isplay = false"
        @ended="ended"
      ></audio>

      <music-full
        ref="musicfull"
        :currentMusic="currentMusic"
        :isplay="isplay"
        :currentTime="currentTime"
        :totalTime="totalTime"
        :playlist="playlist"
        v-show="isfull"
        @escfull="isfull = $event"
        @changetime="changetime"
        @play="$emit('play', $event)"
      ></music-full>
    </div>
  </transition>
</template>

<script>
import MusicFull from "./MusicFull.vue";
export default {
  data() {
    return {
      isfull: false,
      isplay: true,
      currentTime: 0,
      totalTime: 0,
    };
  },
  components: { MusicFull },
  props: {
    currentMusic: {
      type: Object,
      define: () => {
        return null;
      },
    },
    playlist: {
      type: Array,
      define: () => {
        return [];
      },
    },
  },
  created() {},
  methods: {
    changeplay() {
      let player = this.$refs.audio;
      this.isplay = !this.isplay;
      if (this.isplay) {
        player.play();
      } else {
        player.pause();
      }
    },
    timeupdate(event) {
      let player = event.target;
      let drawer = this.$refs.canvas.getContext("2d");
      let currentTime = (this.currentTime = player.currentTime);
      let totalTime = (this.totalTime = player.duration);
      let playRect = (currentTime / totalTime) * (2 * Math.PI);

      drawer.clearRect(0, 0, 40, 40);
      drawer.beginPath();
      drawer.lineWidth = "3";
      drawer.strokeStyle = "rgba(255,255,255,0.3)";
      drawer.arc(20, 20, 15, 0, 2 * Math.PI);
      drawer.stroke();
      drawer.closePath();

      drawer.beginPath();
      drawer.strokeStyle = "#8671d7";
      drawer.arc(20, 20, 15, 0, playRect);
      drawer.stroke();
      drawer.closePath();
    },
    changetime(time) {
      if (!time) return;
      this.$refs.audio.currentTime = time;
    },
    ended() {
      this.$refs.musicfull.nextmusic();
    },
  },
};
</script>

<style lang="scss" scoped>
.musicplay {
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 101;
  background: #fff;
  .player {
    height: 70px;
    position: relative;
    background-color: rgba(0, 0, 0, 0.3);
    overflow: hidden;
    white-space: nowrap;
    span {
      position: absolute;
      top: 10px;
      left: 70px;
      width: 40%;
      font-size: 16px;
      font-weight: bold;
      color: #9b627e;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .artist {
      width: 40%;
      font-size: 12px;
      display: inline-block;
      position: absolute;
      top: 35px;
      left: 70px;
      color: rgba(0, 0, 0, 0.6);
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .song_img {
      width: 50px;
      margin-left: 10px;
      margin-top: 10px;
      border-radius: 50%;
      animation: rotate 5s linear infinite;
    }
    .img-icon {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      & img {
        width: 14px;
        height: 14px;
        margin: 0px 20px;
      }
      canvas {
        position: absolute;
        top: -8px;
        right: 7px;
        z-index: -1;
        transform: rotate(-90deg);
      }
    }
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
